@import "mixins";
*{
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}
html{
  width: 100%;
  height: 100%;
      body {
        width: 100%;
        height: 100% ;
        
        // 下方header
        header {
          width: 1200px;
          height: 70px;
          margin: 0 auto;
          line-height: 100%;
          img{
            margin:15px 0 15px ;
            float: left;
          }
          // header里div
          .nav{
            height: 100%;
            display: flex;
            float: left;
            margin-left: 50px;
            &:hover .first{
              border-top:none;
            }
            // 第一个li
            .first {
               border-left: 1px solid #EEE;
              border-top: solid 3px #2771fa;
               &:hover {
                 border-top: #2771fa 3px solid;
               }
            }
            // 第二个li
           .second {
             position: relative;
             border-left: 1px solid #EEE;

             &:hover {
               border-top: #2771fa 3px solid;
             }
            //  第一个li下方二级ul菜单
             .erjiul1 {
               width: 640px;
               position: absolute;
               top: 67px;
               left: 0;
               z-index: 1000;
               background-color: #FFF;
               display: none;
             }
           }
            //第三个li  
            .third{
               border-left: 1px solid #EEE;
                &:hover {
                  border-top: #2771fa 3px solid;
                }
            }
            // 第四个li
            .fourth{
               border-left: 1px solid #EEE;
                &:hover {
                  border-top: #2771fa 3px solid;
                }
            }
            // 第五个li
            .fifth{
               border-left: 1px solid #EEE;
                &:hover {
                  border-top: #2771fa 3px solid;
                }
            }
            // 第六个li
            .last {
              border-left: 1px solid #EEE;
              border-right: 1px solid #EEE;
               &:hover {
                 border-top: #2771fa 3px solid;
               }
            }
           


              li{
                
                box-sizing: border-box;
                height: 100%;
                display: flex;
                justify-content: center;
                align-content: center;
                line-height: 70px;
                
                padding: 0 18px 0 18px;
                 &:hover .first {
                   border-top: none;
                 }
                 a {
                   color: #333;
                   box-sizing: border-box;
                   display: block;
                   height: 100%;
                   height: 70px;
                   line-height: 70px;
                  &:hover{
                    color: #2771fa;
                  }
                 }
              }
            
            
          }
          .topright{
            float: right;
            width: 301px;
            margin-top: 10px;
            height: 60px;
            position: relative;
            a{
              width: 48px;
              height: 48px;
              display: block;
              float: left;
              margin-left: 20px;
            }
            .qiye{
              background: url(https://guanjia.qq.com/assets/images/main/ic_qiye.png) no-repeat 0 0;
              &:hover{
                background-position:0 -48px;
              }
            }
            .shouji{
              background: url(https://guanjia.qq.com/assets/images/main/ic_block.png) no-repeat;
              background-position: -48px 0;
              &:hover{
                background-position: -48px -48px;
              }
            }
            .mac{
              background: url(https://guanjia.qq.com/assets/images/main/ic_block.png) no-repeat;
              background-position: 0 0;
              &:hover{
                background-position: 0 -48px;
              }
            }
            .login{
              position: absolute;
              top: 17px;
              right: 17px;
              color: #2771fa;
              font-size: 14px;
            }
            
          }
          
        }
        // header结束 下方轮播图
        .swiper-container{
          width: 100%;
          height: 418px;
          position: relative;
          color: #FFF;
          .lianjie{
            position: absolute;
            display: block;
            top:340px ;
            left: 700px;
            z-index: 100;
            i{
              font-style: normal;
              font-size: 14px;
            }
            a{
              color: #FFF;
              text-decoration: underline;
              font-size: 14px;
            }
          }
          .download1{
            width: 240px;
            height: 70px;
            background-color: rgb(50, 216, 64);
            position: absolute;
            top: 250px;
            left: 700px;
            z-index: 100;
            &:hover {
              background-color: rgb(52, 236, 45);
            }
            
            a{
              color: #FFF;
              text-align: center;
              display: block;
              margin-top: 14px;
              
              
             i{
               font-size: 30px;
             }
            span{
              font-size: 30px;
            }
            }
            
          }
          
          .swiper-wrapper{
            width: 100%;
            .swiper-slide{
              width: 100%;
              img{
                width: 100%;
                height: 100%;
              }
            }
          }
        }
        // 轮播图结束 下方logo链接区
        .logobig{
          width: 100%;
          height: 70px;
          
          position: relative;
          .logolist{
            text-align: center;
            height: 42px;
            margin:35px auto ;
            a{
            height: 32px;
              img{
                height: 32px;
              }
              margin: 0 36px 0 0;
            }
          }
          p{
            font-size: 12px;
            color: #c6c6c6;
            display: block;
            position: absolute;
            top: 45px;
            left: 500px;
          }
        }
        //logo区结束 下方newsboxs区
        .newsboxs{
          width: 1200px;
          height: 405px;
          margin:30px auto 27px ;

          box-sizing: border-box;
          
          .newsbox{
            width: 300px;
            height: 404px;
            box-sizing: border-box;
            border: 1px solid #eaeaea;
            border-right:none ;
            float: left;
            padding-left:19px ;
            .newstitle{
              height: 58px;
              line-height: 58px;
              font-size: 18px;
              color: #2771fa;
              text-align: center;
              width: 100%;
              
            }

            .newslist{
              width: 260px;
              height: 165px;
              margin: 10px 0px 0 ;
              position: relative;
              
              overflow: hidden;
              display: block;
              .chakan{
                font-size: 14px;
                line-height: 14px;
                position: absolute;
                color: #aaaaaa;
                right: 10px;
                bottom: 20px;
              }
              ul{
                width: 260px;
                height: 120px;
                display: block;
                li{
                  overflow: hidden;
                  width: 240px;
                  position: relative;
                  height: 30px;
                  line-height: 30px;
                  font-size: 14px;
                  padding-left: 20px;
                  color: #848484;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  i{
                    display: block;
                    position: absolute;
                    top: 14px;
                    left: 10px;
                    height: 2px;
                    width: 2px;
                    background-color:#2771fa;
                  }
                  a{
                    color: #777777;
                     overflow: hidden;
                     white-space: nowrap;
                     text-overflow: ellipsis;
                     
                  }
                }
              }
            }
            .newsimgs{
              position: relative;
              a{
                position: relative;
                display: block;
                img{
                  padding: auto;
                }
                p{
                  position: absolute;
                  left: 0;
                  bottom: 5px;
                  color: #FFF;
                  padding-left: 5px;
                  padding-bottom: 2px;
                  background-color:rgba($color: #000000, $alpha:0.4);
                  width: 254px;
                  font-size: 14px;

                }
              }
              .download{
                position: absolute;
                top: 80px;
                right: 30px;
                width: 85px;
                height: 30px;
                line-height: 30px;
                display: block;
                background-color: #05e875;
                color: #FFF;
                text-align: center;
                font-size: 14px;


              }
            }
          }
          .newsbox1{
            border-right:1px solid #eaeaea;
          }
        } 
        // newsbox区结束 下方funclist
        .funclist{
          width: 1200px;
          height: 394px;
          margin: 20px auto 10px;
          .functitle{
            width: 1160px;
            height: 55px;
            color: #2771fa;
            line-height: 55px;
            font-size: 18px;
            padding:0 20px;
            position: relative;
            border-bottom:solid #eaeaea 1px;
            margin: 0 0 20px;
            i{
              position: absolute;
              width: 2px;
              height: 18px;
              display: block;
              background-color: #2771fa;
              left: 0;
              top: 19px;
            }
          }
          // functitle结束
          .funccard{
            width:392px ;
            height: 159px;
            position: relative;
            margin: 0 4px 0 2px;
            float: left;
            :hover{
              .funcimg1{
                display: block;  
              }
              
              
            }
            a{ 
                       
              .funcimg1{
                position: absolute;
                left: -34px;
                top: -31px;
                display: none;
                
              }
              .funcimg2{
                position: absolute;
                left: 42px;
                top: 50px;
              }
              .funcname{
                position: absolute;
                top: 50px;
                left:170px ;
                font-size: 16px;
                color: #272727;
              }
              .funcname2{
                position: absolute;
                top: 130px;
                left: 53px;
                font-size: 16px;
                color: #272727 ;
              }
              .functext{
                position: absolute;
                top: 85px;
                left: 170px;
                font-size: 12px;
                width: 157px;
                height: 45px;
                color: #848484;
              }
              .functext2{
                position: absolute;
                top: 160px;
                left: 30px;
                width:115px ;
                font-size: 12px;
                color: #848484;
              }
            }
          }

          
          .funccard2 {
            width: 186px;
            height: 228px;
            position: relative;
            margin: 0 12px 0 2px;
            float: left;

            :hover {
              .funcimg1 {
                display: block;
              }


            }

            a {

              .funcimg1 {
                position: absolute;
                left: -39px;
                top: -31px;
                display: none;

              }

              .funcimg2 {
                position: absolute;
                left: 42px;
                top: 50px;
              }

             

              .funcname2 {
                position: absolute;
                top: 130px;
                left: 53px;
                font-size: 16px;
                color: #272727;
              }

              

              .functext2 {
                position: absolute;
                top: 160px;
                left: 30px;
                width: 115px;
                font-size: 12px;
                color: #848484;
              }
            }
          }
          

        }
        // funclist结束
        // 下方funcnav
        .funcnav{
          width: 1200px;
          overflow: hidden;
          border: 1px solid #eaeaea;
          color: #373737;
          margin: 1px auto 10px;
          .funcnavul{
            width: 100%;
            height: 35px;
            display: block;
            padding-bottom: 20px;
            li{
              float: left;
              padding: 0 1.5% 0 0.5%;
              position: relative;
              width: 22.9%;
              height: 1.8em;
              line-height: 1.8em;
              font-size: 12px;
              a{
                color: black;
              }
              
            }
          }

          .funcnavtitle{
            width: 1140px;
            height: 55px;
            color: #2771fa;
            line-height: 55px;
            font-size: 18px;
            padding: 0 35px;
            position: relative;
            border-bottom: 1px solid #eaeaea;
            margin: 0 0 20px;
            
            i {
              position: absolute;
              width: 2px;
              height: 18px;
              display: block;
              background-color: #2771fa;
              left: 10px;
              top: 19px;
            }
          }
        }
        footer{
          background-color: #f6f6f6;
          padding-top:30px;
          width: 100%;
          padding-bottom: 30px;
          height: 125px;
          .banquan{
            text-align: center;
            display: block;
            font-size: 12px;
            line-height: 20px;
            margin-top: 40px;
            a{
              color: #565656;
            }
          }
          p{
            text-align: center;
            font-size:12px ;
            color: #9e9e9e;
            display: block;
          }
          .partner{
            width:1270px ;
            margin: 10px auto;
            margin-bottom: 25px;
            padding-bottom: 50px;

            h3 {
              font-size: 14px;
              float: left;
              line-height: 26px;
              margin-right: 15px;
              color: #9d9d9d;
              margin-left: 15px;
            }
            li{
              float: left;
              a{
                color: #2771fa;
              }
            }
          }
        }

      //下方body标签 
      }
      // 下方html标签
}


    